<script setup>
import { ref,watch,onMounted,onUnmounted } from 'vue'

import DetailBox from '@/components/DetailBox.vue'
import StoreBox from '@/components/StoreBox.vue'
import BottomTop from '@/components/BottomTop.vue'
import BottomBottom from '@/components/BottomBottom.vue'
import RightTop from '@/components/RightTop.vue'

const storeStats = [
  { name: '已选门店', value: 23 },
  { name: '活跃会员数', value: '232,300' },
  { name: '平均月销售额', value: '￥222,423' },
  { name: '平均售罄率', value: '45%' },
  { name: '客单价', value: '￥34,544' }
]
const goodsData = ref({
  iconSrc: new URL('@/assets/goods.png', import.meta.url).href,
  mainTitle: '货',
  subTitle: '-限定卖货范围',
  groupTitle: '选择商品分组',
  buttonText: '2023年春夏款库存充足',
  imageSrc: new URL('@/assets/detail-body.png', import.meta.url).href,
  firstGroup: [
    { name: '款数', value: '834' },
    { name: '库存', value: '29,234' },
    { name: '库龄', value: '3年' },
    { name: '售罄率', value: '60%' }
  ],
  secondGroup: [
    { name: '主要商品', value: 'T恤' },
    { name: '价格带', value: '￥1000-3000' },
    { name: '折扣率', value: '56%' },
    { name: '销售状态', value: '畅销' }
  ],
  footerText: '商品明细',
  isSwitched:false,
  isAI:false
})
const peopleData = ref({
  iconSrc: new URL('@/assets/people.png', import.meta.url).href,
  mainTitle: '人',
  subTitle: '-明确营销对象',
  groupTitle: '选择会员分组',
  buttonText: '2月正价核心会员群',
  imageSrc: new URL('@/assets/detail-body.png', import.meta.url).href,
  firstGroup: [
    { name: '分组会员', value: '9213' },
    { name: '开卡率', value: '34%' },
    { name: '主类型', value: '老会员' },
    { name: '年龄段', value: '30-50' }
  ],
  secondGroup: [
    { name: '复购率', value: '12%' },
    { name: 'RFM', value: '重要发展' },
    { name: '平均折扣', value: '87%' },
    { name: '客单价', value: '￥1213.9' }
  ],
  footerText: '商品明细',
  isSwitched:false,
  isAI:false
})
const isSwitched = ref(false)
const switchBoxes = () => {
  isSwitched.value = !isSwitched.value
}
const isAISelected = ref(false)
watch(isAISelected, (newVal) => {
  peopleData.value.isAI = newVal
  goodsData.value.isAI = newVal
})
watch(isSwitched, (newVal) => {
  peopleData.value.isSwitched = newVal
  goodsData.value.isSwitched = newVal
  console.log(peopleData .value.isSwitched,goodsData.value.isSwitched);
  
})

const dropdownVisible = ref(false)

function SelectAlgorithm() {
  dropdownVisible.value = !dropdownVisible.value
}

function onClickOutside(event) {
  const selectEl = document.querySelector('.el-icon-arrow-down')
  if (selectEl && !selectEl.contains(event.target)) {
    dropdownVisible.value = false
  }
}
onMounted(() => {
  document.addEventListener('click', onClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', onClickOutside)
})

//ai点击切换图片
const images = [
  new URL('@/assets/switch-1.png', import.meta.url).href,
  new URL('@/assets/switch-2.png', import.meta.url).href,
  new URL('@/assets/switch-3.png', import.meta.url).href
]

const currentImage = ref(images[0]) // 初始图片

const startImageCycle = () => {
  let index = 0
  const interval = setInterval(() => {
    index++
    if (index < images.length) {
      currentImage.value = images[index]
    } else {
      clearInterval(interval) // 停止切换
    }
  }, 300) // 每 0.3 秒切换
}
</script>

<template>
  <div class="container">
    <!-- 左侧店人货大盒子 -->
    <div class="left-panel">
      <!-- 店-->
      <div class="store">
        <StoreBox
          :mainArea="'广州'"
          :storeData="storeStats"
        />
      </div>
      <!-- 货、人-->
      <div class="left-bottom-box">
        <div class="detail-box">
          <DetailBox v-bind="isSwitched ? peopleData : goodsData"/>
        </div>

        <div class="custom-divider"></div>
        <div class="detail-box">
          <DetailBox v-bind="isSwitched ? goodsData : peopleData"/>
        </div>
        <div class="switch-button" @click="switchBoxes"><img src="@/assets/switch-button.png" alt=""></div>
        <div class="isAI-button">
          <el-radio-group v-model="isAISelected">
            <el-radio :label="true" size="default">AI选</el-radio>
            <el-radio :label="false" size="default">自选</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="aimatch-button" @click="startImageCycle">
        <img :src="currentImage" alt="" />
      </div>
    </div>

    <!-- 右侧两个竖着的小盒子 -->
    <div class="right-panel">
      <div class="top-box">
        <RightTop />
      </div>
      <div class="bottom-box">
        <div class="bottom-top">
          <BottomTop />
        </div>
        <div class="bottom-bottom">
          <BottomBottom />
        </div>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  gap: 10px;
  background-color: rgba(232, 237, 255, 1);

  /* 左侧大盒子 */
  .left-panel {
    width: 62%;
    height: calc(100vh - 20px);
    margin: 10px;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;

      .store,
      .left-bottom-box{
        border: 1px solid rgba(189, 209, 255, 1); // 蓝色边框
        border-radius: 4px;
        position: relative;
      }

      .store{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;

      }
      .left-bottom-box{
        flex: 3;
        display: flex;
        position: relative;
        gap: 10px;
        .detail-box{
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        .custom-divider{
          position: absolute;
          top: 115px;
          bottom: 50px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          border-left: 2px dashed rgba(201, 201, 201, 1);
        }
        .switch-button{
          position: absolute;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          height: 50px;
          width: 50px;
          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .isAI-button{
          position: absolute;
          left: 785px;
          top: 85px;
          .el-radio-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }
          ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
            background-color: rgba(37, 207, 130, 1);
            border-color: rgba(37, 207, 130, 1);
          }
          ::v-deep(.el-radio.is-checked .el-radio__label) {
            color: rgba(37, 207, 130, 1) !important;
          }
        }
      }
      .aimatch-button { 
          position: absolute;
          left: 900px;
          top: 160px;
          img{
            width: 80px;
            height: auto;
          }
        }
  }

  /* 右侧两个小盒子 */
  .right-panel {
    width: 38%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px;

    .top-box,
    .bottom-box {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    .top-box {
        flex: 2;
        display: flex;
        flex-direction: column;
    }
    .bottom-box {
      flex: 3;
      display: flex;
      flex-direction: column;
      padding: 20px;
      .bottom-top,
      .bottom-bottom {
        border: 1px solid rgba(189, 209, 255, 1); // 蓝色边框
        border-radius: 4px;
      }
      .bottom-top{
         flex: 13;
         margin-bottom: 10px;
         display: flex;
         flex-direction: column;
      }
      .bottom-bottom{
         flex: 12;
         display: flex;
         flex-direction: column;
      }
    }
  }
}
</style>
